<template>
  <div class="side">
    <div class="reister">
      <el-row>
        <el-button type="primary" @click="createUserHead" class="dakai">提交</el-button>
      </el-row>
    </div>
    <el-form :model="UserHead" label-position="right" label-width="181px" ref="dataForm">
      <el-form-item label="">
        <el-radio-group v-model="UserHead.status">
          <el-radio label="1">自定义默认头像</el-radio>
          <el-radio label="2">系统默认头像</el-radio>
        </el-radio-group>
        <p style="width:408px;height:57px;font-size:14px;line-height:27px;margin:0;color:#606266">网校内未上传头像的用户，都会显示该默认头像。建议图片尺寸为 270×270px。建议图片大小不超过2MB。如何制作合适的图片？ </p>
        <div v-show="UserHead.status==='1'">
          <img v-if="UserHead.url" :src="UserHead.url" alt class="img" style="width:270px;height:270px;">
          <el-upload
            :on-change="handleChange"
            :http-request="uploadFile"
            :limit="1"
            action=""
            class="upload-demo"
            accept="image/jpg, image/png"
          >
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
        <img v-if="UserHead.status === '2'" alt="" src="@/assets/404_images/head.png" srcset="">
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {getUserHead, setHead} from '@/api/system/user_set';
  import {upLoadFile} from '@/api/upLoadFile' // 数据接口
  import {getTenantId} from '@/utils/auth';

  export default {
    data() {
      return {
        UserHead: {
          status: 1,
          headId: '',
          url: ''
        },
        file: ''
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        getUserHead(getTenantId()).then(response => {
          this.UserHead = response.data;
        }).catch(err => {
          console.log(err)
        })
      },
      handleChange(file) {
        this.file = file.raw
      },
      uploadFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.file.name)
        fileForm.append('uid', this.file.uid)
        fileForm.append('file', this.file)
        upLoadFile(fileForm).then(response => {
          this.UserHead.headId = response.data.id
          this.UserHead.url = response.data.url
        })
      },
      createUserHead() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.UserHead.tenantId = getTenantId();
            setHead(this.UserHead).then(() => {
              this.$notify({
                title: '成功',
                message: '设置成功',
                type: 'success',
                duration: 2000
              });
              this.fetchData();
            })
          }
        });
      }
    }
  };
</script>

<style>
  .reister {
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding-left: 10px;
    background-color: #e7e9ed;
    padding-top: 15px;
    padding-right: 34px;
  }

  .dakai {
    float: right;
    position: absolute;
    right: 10px;
    bottom: -25px;
  }


</style>
